<template>
    <div>
        <el-row :gutter="20">
            <el-col :span="8">
                <el-card shadow="hover" class="mgb20" style="height:252px;">
                    <div class="user-info">
                        <img src="../../assets/img/img.jpg" class="user-avator" alt />
                        <div class="user-info-cont">
                            <div class="user-info-name">{{username}}</div>
                            <div class="user-role">{{role}}</div>
                        </div>
                    </div>
                    <div class="user-info-list">
                        登录时间：
                        <span>{{date}}</span>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="16">
                <el-row :gutter="20" class="mgb20">
                    <el-col :span="8">
                        <el-card shadow="hover" :body-style="{padding: '0px'}">
                            <div class="grid-content grid-con-1">
                                <i class="el-icon-lx-people grid-con-icon"></i>
                                <div class="grid-cont-right">
                                    <div class="grid-num">{{name}}</div>
                                    <div></div>
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :span="8">
                        <el-card shadow="hover" :body-style="{padding: '0px'}">
                            <div class="grid-content grid-con-2">
                                <i class="el-icon-lx-notice grid-con-icon"></i>
                                <div class="grid-cont-right">
                                    <!-- <div class="grid-num">321</div>
                                    <div>系统消息</div> -->
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :span="8">
                        <el-card shadow="hover" :body-style="{padding: '0px'}">
                            <div class="grid-content grid-con-3">
                                <i class="el-icon-lx-goods grid-con-icon"></i>
                                <div class="grid-cont-right">
                                    <!-- <div class="grid-num">5000</div>
                                    <div>数量</div> -->
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                </el-row>
            <div class="container">
            <div class="plugins-tips">
                奖项统计表
            </div>

            <div class="schart-box">
                <!-- <div class="content-title">奖项名额饼状图</div> -->
                <schart class="schart" canvasId="pie" :options="options3"></schart>
            </div>
        </div>
                
            </el-col>
        </el-row>
    </div>
</template>

<script>
import bus from '../common/bus';
import Schart from 'vue-schart';
import {selectAllAwards} from '@/api/classAwards.js';
import moment from 'moment';

export default {
    name: 'dashboard',
    data() {
        return {
            roles:[],
            nickname:'',
            role1:[],
            name:'',
            newTime:new Date(),
            todoList: [],
            data: [
                
            ],
            options3: {
                type: 'pie',
                title: {
                    text: '奖项名额饼状图'
                },
                legend: {
                    position: 'left'
                },
                bgColor: '#fbfbfb',
                labels: [],
                datasets: [
                    {
                        data: []
                    }
                ]
            },

        };
    },
    computed: {
        username(){
            const userInfo = JSON.parse(localStorage.getItem("userInfo"));
            const nickname = userInfo.nickname;

            return nickname ? nickname : this.nickname;
        },
        role() {
            const roles = localStorage.getItem("roles");
            return roles ? roles : this.roles;
        },
        date(){
            return moment(this.nowTime).format("YYYY年MM月DD日 HH时mm分ss秒");
        }
    },
    created() {
        this.getAwards();
        this.getUser();
    },    
    components: {
        Schart
    },
    methods: {
        getUser(){
            const _this = this;
            let userInfo = localStorage.getItem("userInfo");
            let user = JSON.parse(userInfo);
            this.name = user.nickname;
        },
        //获得所有类型
        getAwards(){
            const _this = this;
            selectAllAwards().then((res)=>{
                console.log(res);
                for(let i = 0;i<res.data.length;i++){
                    _this.options3.labels.push(res.data[i].awardsName);
                    _this.options3.datasets[0].data.push(res.data[i].awardsNum)
                }
            })
        },
        changeDate() {
            const now = new Date().getTime();
            this.data.forEach((item, index) => {
                const date = new Date(now - (6 - index) * 86400000);
                item.name = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
            });
        }
    }
};
</script>


<style scoped>
.el-row {
    margin-bottom: 20px;
}

.grid-content {
    display: flex;
    align-items: center;
    height: 100px;
}

.grid-cont-right {
    flex: 1;
    text-align: center;
    font-size: 14px;
    color: #999;
}

.grid-num {
    font-size: 30px;
    font-weight: bold;
}

.grid-con-icon {
    font-size: 50px;
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 100px;
    color: #fff;
}

.grid-con-1 .grid-con-icon {
    background: rgb(45, 140, 240);
}

.grid-con-1 .grid-num {
    color: rgb(45, 140, 240);
}

.grid-con-2 .grid-con-icon {
    background: rgb(100, 213, 114);
}

.grid-con-2 .grid-num {
    color: rgb(45, 140, 240);
}

.grid-con-3 .grid-con-icon {
    background: rgb(242, 94, 67);
}

.grid-con-3 .grid-num {
    color: rgb(242, 94, 67);
}

.user-info {
    display: flex;
    align-items: center;
    padding-bottom: 20px;
    border-bottom: 2px solid #ccc;
    margin-bottom: 20px;
}

.user-avator {
    width: 120px;
    height: 120px;
    border-radius: 50%;
}

.user-info-cont {
    padding-left: 50px;
    flex: 1;
    font-size: 14px;
    color: #999;
}

.user-info-cont div:first-child {
    font-size: 30px;
    color: #222;
}

.user-info-list {
    font-size: 14px;
    color: #999;
    line-height: 25px;
}

.user-info-list span {
    margin-left: 70px;
}

.mgb20 {
    margin-bottom: 20px;
}

.todo-item {
    font-size: 14px;
}

.todo-item-del {
    text-decoration: line-through;
    color: #999;
}

.schart {
    width: 100%;
    height: 300px;
}
.user-role{
    margin-top: 10px;
    font-size: 20px;
}
</style>
